<!--
 * @Author: sbotlp
 * @Email: sbotlp@sina.com
 * @Date: 2019-11-17 22:08:28
 * @LastEditTime: 2019-11-17 23:29:46
 * @Description: http://www.sbotlp.com.cn
 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>
</head>

<body>
  snabbdom-table
  <div>需求：</div>
  <div>1、将该数据展示成一个表格</div>
  <div>2、随便改一个信息，表格特跟着改变</div>
  <pre>
  [
    {
      name: '张三',
      age: 20,
      address: '北京'
    },
    {
      name: '李四',
      age: 21,
      address: '上海'
    },
    {
      name: '王五',
      age: 22,
      address: '广州'
    }
  ]
  </pre>
  <div id="container"></div>
  <button id="btn-change">change</button>
  <script>
    var datas = [
      {
        name: '张三',
        age: 20,
        address: '北京'
      },
      {
        name: '李四',
        age: 21,
        address: '上海'
      },
      {
        name: '王五',
        age: 22,
        address: '广州'
      }
    ];
    // 将表头内容加入数据中
    datas.unshift({
      name: '姓名',
      age:'年龄',
      address: '所在地'
    })
    var snabbdom = window.snabbdom;
    // 定义path函数，关键函数1
    var path = snabbdom.init([
      snabbdom_class,
      snabbdom_style,
      snabbdom_props,
      snabbdom_eventlisteners
    ]);
    // 获取容器
    var container = document.getElementById('container');
    // 定义H函数，关键函数2
    var h = snabbdom.h;
    /* function element(data) {
      var list = [];
      var tableTItle = h('tr', {}, [h('td', {}, '名字'), h('td', {}, '年龄'), h('td', {}, '所在地')]);
      list.push(tableTItle);
      data.forEach(item => {
        list.push(h('tr', {}, [h('td', {}, item.name), h('td', {}, item.age), h('td', {}, item.address)]))
      });
      return h('table', {}, list);
    } */
    // 渲染函数
    var vndoe;
    function render(data) {
      var newVnode = h('table#id名在此.类名在此', {}, data.map(function(item){
        var tds = [];
        var i;
        for (i in item) {
          if (item.hasOwnProperty(i)) {
            tds.push(h('td', {}, item[i] + ''))
          }
        }
        return h('tr', {},tds);
      }));
      if (vndoe) {
        // re-render
        path(vndoe, newVnode);
      } else {
        // 初次渲染
        // diff运算，找出准确改变得dom节点，点对点渲染真实DOM
        path(container, newVnode);
      }
      // 存储当前渲染的newVnode；
      vndoe = newVnode;
    }
    // 初次渲染
    render(datas);

    document.getElementById('btn-change').addEventListener('click', function (e) {
      e.preventDefault();
      datas[0].age = Math.floor(Math.random()*100);
      datas[1].age = 30;
      datas[2].address = '深圳';
      // re-render 
      render(datas);
    });
  </script>
</body>
</html>